<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>js学习day03 | 凌歆的博客</title>
    <meta name="generator" content="VuePress 1.9.5">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.d9c8cf8c.css" as="style"><link rel="preload" href="/assets/js/app.57550e13.js" as="script"><link rel="preload" href="/assets/js/2.f014c35f.js" as="script"><link rel="preload" href="/assets/js/65.bc099429.js" as="script"><link rel="prefetch" href="/assets/js/10.03a98811.js"><link rel="prefetch" href="/assets/js/100.145e708e.js"><link rel="prefetch" href="/assets/js/101.098ca5c8.js"><link rel="prefetch" href="/assets/js/102.4d45c69a.js"><link rel="prefetch" href="/assets/js/103.499de505.js"><link rel="prefetch" href="/assets/js/104.c2c1b9b6.js"><link rel="prefetch" href="/assets/js/105.4e9b0663.js"><link rel="prefetch" href="/assets/js/106.9bb8cf6f.js"><link rel="prefetch" href="/assets/js/107.a81b32d7.js"><link rel="prefetch" href="/assets/js/108.81511e67.js"><link rel="prefetch" href="/assets/js/109.6a6741bf.js"><link rel="prefetch" href="/assets/js/11.e8729182.js"><link rel="prefetch" href="/assets/js/110.de657fe7.js"><link rel="prefetch" href="/assets/js/111.b092af6d.js"><link rel="prefetch" href="/assets/js/112.2dca5709.js"><link rel="prefetch" href="/assets/js/113.dbed1fac.js"><link rel="prefetch" href="/assets/js/114.e95a0131.js"><link rel="prefetch" href="/assets/js/115.2e3e8285.js"><link rel="prefetch" href="/assets/js/116.e64f7fec.js"><link rel="prefetch" href="/assets/js/117.583552c9.js"><link rel="prefetch" href="/assets/js/118.aa5d18f0.js"><link rel="prefetch" href="/assets/js/119.0c7b52d7.js"><link rel="prefetch" href="/assets/js/12.d63acec2.js"><link rel="prefetch" href="/assets/js/120.13f86281.js"><link rel="prefetch" href="/assets/js/121.e2b5b7f9.js"><link rel="prefetch" href="/assets/js/122.5252216a.js"><link rel="prefetch" href="/assets/js/123.8b8a3503.js"><link rel="prefetch" href="/assets/js/124.60df855c.js"><link rel="prefetch" href="/assets/js/125.f073ab1c.js"><link rel="prefetch" href="/assets/js/126.7b73de6a.js"><link rel="prefetch" href="/assets/js/127.4e25971c.js"><link rel="prefetch" href="/assets/js/128.0edf0e06.js"><link rel="prefetch" href="/assets/js/129.5cb5a70a.js"><link rel="prefetch" href="/assets/js/13.2259ef71.js"><link rel="prefetch" href="/assets/js/130.00247fda.js"><link rel="prefetch" href="/assets/js/131.d6fc003a.js"><link rel="prefetch" href="/assets/js/132.1a32b18f.js"><link rel="prefetch" href="/assets/js/133.e46c0193.js"><link rel="prefetch" href="/assets/js/134.a6ad681f.js"><link rel="prefetch" href="/assets/js/135.2fcbe137.js"><link rel="prefetch" href="/assets/js/136.f69bf451.js"><link rel="prefetch" href="/assets/js/137.b9ef2fcc.js"><link rel="prefetch" href="/assets/js/138.7fdd9feb.js"><link rel="prefetch" href="/assets/js/139.a3a37c91.js"><link rel="prefetch" href="/assets/js/14.0d6b23b9.js"><link rel="prefetch" href="/assets/js/140.a7c013ae.js"><link rel="prefetch" href="/assets/js/141.956c36ce.js"><link rel="prefetch" href="/assets/js/142.5aacfe42.js"><link rel="prefetch" href="/assets/js/143.57d691ef.js"><link rel="prefetch" href="/assets/js/144.b1e5766e.js"><link rel="prefetch" href="/assets/js/145.463284b7.js"><link rel="prefetch" href="/assets/js/146.6cc6420c.js"><link rel="prefetch" href="/assets/js/147.5b78c5a2.js"><link rel="prefetch" href="/assets/js/148.8d1d7679.js"><link rel="prefetch" href="/assets/js/149.4e0eb213.js"><link rel="prefetch" href="/assets/js/15.f6fde69d.js"><link rel="prefetch" href="/assets/js/150.b183de37.js"><link rel="prefetch" href="/assets/js/151.729ae770.js"><link rel="prefetch" href="/assets/js/152.b1297018.js"><link rel="prefetch" href="/assets/js/153.bb991bca.js"><link rel="prefetch" href="/assets/js/154.6f2286aa.js"><link rel="prefetch" href="/assets/js/155.6a9c7e4d.js"><link rel="prefetch" href="/assets/js/156.f7bd535d.js"><link rel="prefetch" href="/assets/js/157.64c0065c.js"><link rel="prefetch" href="/assets/js/158.d31ae949.js"><link rel="prefetch" href="/assets/js/159.7daea8a7.js"><link rel="prefetch" href="/assets/js/16.7be21beb.js"><link rel="prefetch" href="/assets/js/160.33cc971a.js"><link rel="prefetch" href="/assets/js/161.1676442a.js"><link rel="prefetch" href="/assets/js/162.71378046.js"><link rel="prefetch" href="/assets/js/163.99e49959.js"><link rel="prefetch" href="/assets/js/164.306f07d2.js"><link rel="prefetch" href="/assets/js/165.170977c7.js"><link rel="prefetch" href="/assets/js/166.f8602525.js"><link rel="prefetch" href="/assets/js/167.eea5c001.js"><link rel="prefetch" href="/assets/js/168.0146a311.js"><link rel="prefetch" href="/assets/js/169.05f9c9d9.js"><link rel="prefetch" href="/assets/js/17.2543f471.js"><link rel="prefetch" href="/assets/js/170.25d602b2.js"><link rel="prefetch" href="/assets/js/171.1ada26a6.js"><link rel="prefetch" href="/assets/js/172.2a0f697c.js"><link rel="prefetch" href="/assets/js/173.230d8ca8.js"><link rel="prefetch" href="/assets/js/174.e3758a2b.js"><link rel="prefetch" href="/assets/js/175.0f19f8ea.js"><link rel="prefetch" href="/assets/js/176.bf70d37d.js"><link rel="prefetch" href="/assets/js/177.4400f272.js"><link rel="prefetch" href="/assets/js/178.85af7b89.js"><link rel="prefetch" href="/assets/js/179.4cfaaaa2.js"><link rel="prefetch" href="/assets/js/18.394415f8.js"><link rel="prefetch" href="/assets/js/180.449c8409.js"><link rel="prefetch" href="/assets/js/181.73276924.js"><link rel="prefetch" href="/assets/js/182.5fab25cc.js"><link rel="prefetch" href="/assets/js/183.ecd4934d.js"><link rel="prefetch" href="/assets/js/184.246092cf.js"><link rel="prefetch" href="/assets/js/185.c671cd86.js"><link rel="prefetch" href="/assets/js/186.49bd1963.js"><link rel="prefetch" href="/assets/js/187.1fb32764.js"><link rel="prefetch" href="/assets/js/188.7c6885e9.js"><link rel="prefetch" href="/assets/js/189.a8701dec.js"><link rel="prefetch" href="/assets/js/19.ca7db8ea.js"><link rel="prefetch" href="/assets/js/190.ae3d3bde.js"><link rel="prefetch" href="/assets/js/191.ad7cd44e.js"><link rel="prefetch" href="/assets/js/192.bc443842.js"><link rel="prefetch" href="/assets/js/193.e4755764.js"><link rel="prefetch" href="/assets/js/194.814112ce.js"><link rel="prefetch" href="/assets/js/195.1c0aaa80.js"><link rel="prefetch" href="/assets/js/196.a6bd7add.js"><link rel="prefetch" href="/assets/js/20.4e91cd31.js"><link rel="prefetch" href="/assets/js/21.f095e6e1.js"><link rel="prefetch" href="/assets/js/22.72f4b8ab.js"><link rel="prefetch" href="/assets/js/23.e94eb9d2.js"><link rel="prefetch" href="/assets/js/24.0eae7d6f.js"><link rel="prefetch" href="/assets/js/25.36157609.js"><link rel="prefetch" href="/assets/js/26.dc5b6cba.js"><link rel="prefetch" href="/assets/js/27.c19b7b63.js"><link rel="prefetch" href="/assets/js/28.3aceae59.js"><link rel="prefetch" href="/assets/js/29.536091b3.js"><link rel="prefetch" href="/assets/js/3.d11119c4.js"><link rel="prefetch" href="/assets/js/30.821a4a30.js"><link rel="prefetch" href="/assets/js/31.5238784c.js"><link rel="prefetch" href="/assets/js/32.10bc7179.js"><link rel="prefetch" href="/assets/js/33.c1ed69c9.js"><link rel="prefetch" href="/assets/js/34.8d384231.js"><link rel="prefetch" href="/assets/js/35.d8890e52.js"><link rel="prefetch" href="/assets/js/36.eca37ad5.js"><link rel="prefetch" href="/assets/js/37.802549e3.js"><link rel="prefetch" href="/assets/js/38.53841770.js"><link rel="prefetch" href="/assets/js/39.7ae44409.js"><link rel="prefetch" href="/assets/js/4.493b9bca.js"><link rel="prefetch" href="/assets/js/40.ce56364a.js"><link rel="prefetch" href="/assets/js/41.85f0114b.js"><link rel="prefetch" href="/assets/js/42.714da6e2.js"><link rel="prefetch" href="/assets/js/43.fee4437c.js"><link rel="prefetch" href="/assets/js/44.b039b68b.js"><link rel="prefetch" href="/assets/js/45.96a55605.js"><link rel="prefetch" href="/assets/js/46.956ffb03.js"><link rel="prefetch" href="/assets/js/47.147d9218.js"><link rel="prefetch" href="/assets/js/48.ff787b40.js"><link rel="prefetch" href="/assets/js/49.871eee87.js"><link rel="prefetch" href="/assets/js/5.e0ba07d7.js"><link rel="prefetch" href="/assets/js/50.99b7c29e.js"><link rel="prefetch" href="/assets/js/51.8ecbf4ba.js"><link rel="prefetch" href="/assets/js/52.53d91d7e.js"><link rel="prefetch" href="/assets/js/53.af8a0d2a.js"><link rel="prefetch" href="/assets/js/54.a2f848b5.js"><link rel="prefetch" href="/assets/js/55.267e9947.js"><link rel="prefetch" href="/assets/js/56.0b201c40.js"><link rel="prefetch" href="/assets/js/57.cbdfd6f7.js"><link rel="prefetch" href="/assets/js/58.636c0c3f.js"><link rel="prefetch" href="/assets/js/59.fc9216c4.js"><link rel="prefetch" href="/assets/js/6.b98373f2.js"><link rel="prefetch" href="/assets/js/60.34f16fc4.js"><link rel="prefetch" href="/assets/js/61.4d130bd8.js"><link rel="prefetch" href="/assets/js/62.927caa10.js"><link rel="prefetch" href="/assets/js/63.a451fee0.js"><link rel="prefetch" href="/assets/js/64.32a5d47b.js"><link rel="prefetch" href="/assets/js/66.3953050d.js"><link rel="prefetch" href="/assets/js/67.e934823b.js"><link rel="prefetch" href="/assets/js/68.4bcb52b0.js"><link rel="prefetch" href="/assets/js/69.bede18c8.js"><link rel="prefetch" href="/assets/js/7.8de8df2d.js"><link rel="prefetch" href="/assets/js/70.fce1daac.js"><link rel="prefetch" href="/assets/js/71.ea0a8c5d.js"><link rel="prefetch" href="/assets/js/72.15382c9e.js"><link rel="prefetch" href="/assets/js/73.848364d3.js"><link rel="prefetch" href="/assets/js/74.5fd08a50.js"><link rel="prefetch" href="/assets/js/75.c937c70d.js"><link rel="prefetch" href="/assets/js/76.a0dacd5a.js"><link rel="prefetch" href="/assets/js/77.4019cc23.js"><link rel="prefetch" href="/assets/js/78.9676a9e1.js"><link rel="prefetch" href="/assets/js/79.e46e10d5.js"><link rel="prefetch" href="/assets/js/8.2098eb96.js"><link rel="prefetch" href="/assets/js/80.987e83cb.js"><link rel="prefetch" href="/assets/js/81.eb98ff36.js"><link rel="prefetch" href="/assets/js/82.623561a7.js"><link rel="prefetch" href="/assets/js/83.e256d909.js"><link rel="prefetch" href="/assets/js/84.7d06a550.js"><link rel="prefetch" href="/assets/js/85.b8d9879e.js"><link rel="prefetch" href="/assets/js/86.31c4581b.js"><link rel="prefetch" href="/assets/js/87.e06ee05e.js"><link rel="prefetch" href="/assets/js/88.81ef718d.js"><link rel="prefetch" href="/assets/js/89.ba237d2f.js"><link rel="prefetch" href="/assets/js/9.36092fd0.js"><link rel="prefetch" href="/assets/js/90.ad2c9d92.js"><link rel="prefetch" href="/assets/js/91.a661f52d.js"><link rel="prefetch" href="/assets/js/92.1c28035b.js"><link rel="prefetch" href="/assets/js/93.c8b8e3d6.js"><link rel="prefetch" href="/assets/js/94.b6bc4a44.js"><link rel="prefetch" href="/assets/js/95.92cea882.js"><link rel="prefetch" href="/assets/js/96.5373491b.js"><link rel="prefetch" href="/assets/js/97.bb39efc8.js"><link rel="prefetch" href="/assets/js/98.af7a030f.js"><link rel="prefetch" href="/assets/js/99.07dc87d8.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d9c8cf8c.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://lingxin-tanhua.oss-cn-shanghai.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20220503092755.png" alt="凌歆的博客" class="logo"> <span class="site-name can-hide">凌歆的博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/html/" class="nav-link">HTML笔记</a></li><li class="dropdown-subitem"><a href="/note/js-low/" class="nav-link">JavaScript基础笔记</a></li><li class="dropdown-subitem"><a href="/note/js-high/" class="nav-link">JavaScript高阶笔记</a></li><li class="dropdown-subitem"><a href="/note/js-dom-bom/" class="nav-link">JavaScript DOM和BOM笔记</a></li><li class="dropdown-subitem"><a href="/note/jquery/" class="nav-link">jQuery笔记</a></li><li class="dropdown-subitem"><a href="/note/ajax/" class="nav-link">Ajax笔记</a></li><li class="dropdown-subitem"><a href="/note/nodejs/" class="nav-link">NodeJs笔记</a></li><li class="dropdown-subitem"><a href="/note/reg/" class="nav-link">正则表达式笔记</a></li><li class="dropdown-subitem"><a href="/note/vue/" class="nav-link">Vue笔记</a></li><li class="dropdown-subitem"><a href="/note/react/" class="nav-link">react笔记</a></li><li class="dropdown-subitem"><a href="/note/wx/" class="nav-link">微信小程序笔记</a></li><li class="dropdown-subitem"><a href="/note/uniapp/" class="nav-link">uniapp笔记</a></li><li class="dropdown-subitem"><a href="/note/echarts/" class="nav-link">echarts笔记</a></li><li class="dropdown-subitem"><a href="/note/git/" class="nav-link">Git笔记</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><a href="/back/" class="link-title">后端</a> <span class="title" style="display:none;">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/java/" class="nav-link">JAVA</a></li><li class="dropdown-item"><!----> <a href="/note/javaweb/" class="nav-link">JavaWeb</a></li><li class="dropdown-item"><!----> <a href="/note/mysql/" class="nav-link">MySql</a></li><li class="dropdown-item"><!----> <a href="/note/ssm/" class="nav-link">ssm</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法" class="dropdown-title"><a href="/algor/" class="link-title">算法</a> <span class="title" style="display:none;">算法</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/sf/" class="nav-link">算法训练营</a></li><li class="dropdown-item"><!----> <a href="/note/js-sf/" class="nav-link">js数据结构与算法</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试" class="dropdown-title"><a href="/mianshi/" class="link-title">面试</a> <span class="title" style="display:none;">面试</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/lqb/" class="nav-link">蓝桥杯备战</a></li><li class="dropdown-item"><!----> <a href="/note/ms/" class="nav-link">前端面试</a></li><li class="dropdown-item"><!----> <a href="/note/hmms/" class="nav-link">黑马面试</a></li><li class="dropdown-item"><!----> <a href="/note/xzms/" class="nav-link">校招零距离面试</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="解决方案" class="dropdown-title"><a href="/resolve/" class="link-title">解决方案</a> <span class="title" style="display:none;">解决方案</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/qd-resolve/" class="nav-link">前端解决方案</a></li><li class="dropdown-item"><!----> <a href="/note/hd-resolve/" class="nav-link">后端解决方案</a></li></ul></div></div><div class="nav-item"><a href="/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/linxin1123/vuepress-blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://lingxin-tanhua.oss-cn-shanghai.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20220503092755.png"> <div class="blogger-info"><h3>lingxin</h3> <span>凌歆</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/html/" class="nav-link">HTML笔记</a></li><li class="dropdown-subitem"><a href="/note/js-low/" class="nav-link">JavaScript基础笔记</a></li><li class="dropdown-subitem"><a href="/note/js-high/" class="nav-link">JavaScript高阶笔记</a></li><li class="dropdown-subitem"><a href="/note/js-dom-bom/" class="nav-link">JavaScript DOM和BOM笔记</a></li><li class="dropdown-subitem"><a href="/note/jquery/" class="nav-link">jQuery笔记</a></li><li class="dropdown-subitem"><a href="/note/ajax/" class="nav-link">Ajax笔记</a></li><li class="dropdown-subitem"><a href="/note/nodejs/" class="nav-link">NodeJs笔记</a></li><li class="dropdown-subitem"><a href="/note/reg/" class="nav-link">正则表达式笔记</a></li><li class="dropdown-subitem"><a href="/note/vue/" class="nav-link">Vue笔记</a></li><li class="dropdown-subitem"><a href="/note/react/" class="nav-link">react笔记</a></li><li class="dropdown-subitem"><a href="/note/wx/" class="nav-link">微信小程序笔记</a></li><li class="dropdown-subitem"><a href="/note/uniapp/" class="nav-link">uniapp笔记</a></li><li class="dropdown-subitem"><a href="/note/echarts/" class="nav-link">echarts笔记</a></li><li class="dropdown-subitem"><a href="/note/git/" class="nav-link">Git笔记</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><a href="/back/" class="link-title">后端</a> <span class="title" style="display:none;">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/java/" class="nav-link">JAVA</a></li><li class="dropdown-item"><!----> <a href="/note/javaweb/" class="nav-link">JavaWeb</a></li><li class="dropdown-item"><!----> <a href="/note/mysql/" class="nav-link">MySql</a></li><li class="dropdown-item"><!----> <a href="/note/ssm/" class="nav-link">ssm</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法" class="dropdown-title"><a href="/algor/" class="link-title">算法</a> <span class="title" style="display:none;">算法</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/sf/" class="nav-link">算法训练营</a></li><li class="dropdown-item"><!----> <a href="/note/js-sf/" class="nav-link">js数据结构与算法</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试" class="dropdown-title"><a href="/mianshi/" class="link-title">面试</a> <span class="title" style="display:none;">面试</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/lqb/" class="nav-link">蓝桥杯备战</a></li><li class="dropdown-item"><!----> <a href="/note/ms/" class="nav-link">前端面试</a></li><li class="dropdown-item"><!----> <a href="/note/hmms/" class="nav-link">黑马面试</a></li><li class="dropdown-item"><!----> <a href="/note/xzms/" class="nav-link">校招零距离面试</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="解决方案" class="dropdown-title"><a href="/resolve/" class="link-title">解决方案</a> <span class="title" style="display:none;">解决方案</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/qd-resolve/" class="nav-link">前端解决方案</a></li><li class="dropdown-item"><!----> <a href="/note/hd-resolve/" class="nav-link">后端解决方案</a></li></ul></div></div><div class="nav-item"><a href="/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/linxin1123/vuepress-blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>学习笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript基础笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript高阶笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript DOM和BOM笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>jQuery笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Ajax笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>NodeJs笔记</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/5e6b02/" class="sidebar-link">js学习第一天</a></li><li><a href="/pages/9359f8/" class="sidebar-link">js学习第二天</a></li><li><a href="/pages/cc6aa3/" aria-current="page" class="active sidebar-link">js学习day03</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/cc6aa3/#_1-模块化" class="sidebar-link">1.模块化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_1-1-模块化的定义" class="sidebar-link">1.1 模块化的定义</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_1-2-编程领域的模块化" class="sidebar-link">1.2 编程领域的模块化</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_1-3-模块化的规范" class="sidebar-link">1.3 模块化的规范</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/cc6aa3/#_2-node-js-中的模块化" class="sidebar-link">2.Node.js 中的模块化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_2-1-node-js-中模块的分类" class="sidebar-link">2.1 Node.js 中模块的分类</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_2-2-加载模块" class="sidebar-link">2.2 加载模块</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#示例" class="sidebar-link">示例</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#注意点" class="sidebar-link">注意点</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_2-3-模块作用域" class="sidebar-link">2.3 模块作用域</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#示例-2" class="sidebar-link">示例</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_2-4-向外共享模块作用域中的成员" class="sidebar-link">2.4 向外共享模块作用域中的成员</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#_2-4-1-module-对象" class="sidebar-link">2.4.1 module 对象</a></li><li class="sidebar-sub-header level5"><a href="/pages/cc6aa3/#示例-3" class="sidebar-link">示例</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#_2-4-2-module-exports-对象" class="sidebar-link">2.4.2 module.exports 对象</a></li><li class="sidebar-sub-header level5"><a href="/pages/cc6aa3/#示例-4" class="sidebar-link">示例</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#_2-4-3-共享成员时的注意点" class="sidebar-link">2.4.3 共享成员时的注意点</a></li><li class="sidebar-sub-header level5"><a href="/pages/cc6aa3/#示例-5" class="sidebar-link">示例</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#_2-4-4-exports-对象" class="sidebar-link">2.4.4 exports 对象</a></li><li class="sidebar-sub-header level5"><a href="/pages/cc6aa3/#示例-6" class="sidebar-link">示例</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#_2-4-5-exports-和-module-exports-的使用误区" class="sidebar-link">2.4.5 exports 和 module.exports 的使用误区</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#_2-4-6-node-js-中的模块化规范" class="sidebar-link">2.4.6 Node.js 中的模块化规范</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/cc6aa3/#_3-npm-和包" class="sidebar-link">3.npm 和包</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-1-包" class="sidebar-link">3.1 包</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-2-包的作用" class="sidebar-link">3.2 包的作用</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-3-包的下载" class="sidebar-link">3.3 包的下载</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-4-moment-包的使用" class="sidebar-link">3.4 moment 包的使用</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#直接使用-moment-包来格式化日期" class="sidebar-link">直接使用 moment 包来格式化日期</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-4-装包后多的文件" class="sidebar-link">3.4 装包后多的文件</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-5-包的版本号" class="sidebar-link">3.5 包的版本号</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-6-包管理配置文件" class="sidebar-link">3.6 包管理配置文件</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-7-解决下包慢的问题" class="sidebar-link">3.7 解决下包慢的问题</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-8-nrm" class="sidebar-link">3.8 nrm</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-9-包的分类" class="sidebar-link">3.9 包的分类</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-10-i5ting-toc" class="sidebar-link">3.10 i5ting_toc</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_3-11-规范的包结构" class="sidebar-link">3.11 规范的包结构</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/cc6aa3/#_4-开发自己的包" class="sidebar-link">4.开发自己的包</a></li><li class="sidebar-sub-header level2"><a href="/pages/cc6aa3/#_5-发布包到-npm-上" class="sidebar-link">5.发布包到 npm 上</a></li><li class="sidebar-sub-header level2"><a href="/pages/cc6aa3/#_6-模块加载机制" class="sidebar-link">6. 模块加载机制</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_6-1-模块优先从缓存中加载" class="sidebar-link">6.1 模块优先从缓存中加载</a></li><li class="sidebar-sub-header level4"><a href="/pages/cc6aa3/#示例-7" class="sidebar-link">示例</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_6-2-内置模块的加载机制" class="sidebar-link">6.2 内置模块的加载机制</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_6-3-自定义模块的加载机制" class="sidebar-link">6.3 自定义模块的加载机制</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_6-4-第三方模块的加载机制" class="sidebar-link">6.4 第三方模块的加载机制</a></li><li class="sidebar-sub-header level3"><a href="/pages/cc6aa3/#_6-5-目录作为模块" class="sidebar-link">6.5 目录作为模块</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>正则表达式笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Git笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>echarts笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>微信小程序笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>uniapp笔记</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/web/#前端" data-v-06225672>前端</a></li><li data-v-06225672><a href="/web/#NodeJs笔记" data-v-06225672>NodeJs笔记</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/linxin1123" target="_blank" title="作者" class="beLink" data-v-06225672>lingxin</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2023-01-25</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">js学习day03<!----></h1>  <div class="theme-vdoing-content content__default"><h1 id="node-js-学习第三天"><a href="#node-js-学习第三天" class="header-anchor">#</a> Node.js 学习第三天</h1> <h2 id="_1-模块化"><a href="#_1-模块化" class="header-anchor">#</a> 1.模块化</h2> <h3 id="_1-1-模块化的定义"><a href="#_1-1-模块化的定义" class="header-anchor">#</a> 1.1 模块化的定义</h3> <ul><li><strong>模块化指解决一个复杂问题时，自顶向下逐层把系统划分为若干模块的过程。对应整个系统来说，模块是可组合、分解、更换的单元</strong></li></ul> <h3 id="_1-2-编程领域的模块化"><a href="#_1-2-编程领域的模块化" class="header-anchor">#</a> 1.2 编程领域的模块化</h3> <ul><li>遵守固定的规则，<strong>把一个大文件拆分成独立并相互依赖的多个小模块</strong></li> <li>好处
<ul><li><strong>提高了代码的复用性</strong></li> <li><strong>提供了代码的可维护性</strong></li> <li><strong>可以实现按需加载</strong></li></ul></li></ul> <h3 id="_1-3-模块化的规范"><a href="#_1-3-模块化的规范" class="header-anchor">#</a> 1.3 模块化的规范</h3> <ul><li>对代码进行模块化的拆分和组合时，<strong>需要遵守的那些规则</strong> <ul><li><strong>使用什么样的语法格式来引用模块</strong></li> <li><strong>在模块中使用什么样的语法格式向外暴露成员</strong></li></ul></li></ul> <h2 id="_2-node-js-中的模块化"><a href="#_2-node-js-中的模块化" class="header-anchor">#</a> 2.Node.js 中的模块化</h2> <h3 id="_2-1-node-js-中模块的分类"><a href="#_2-1-node-js-中模块的分类" class="header-anchor">#</a> 2.1 Node.js 中模块的分类</h3> <ul><li><strong>内置模块：Node.js 官方提供，如 fs，path，http</strong></li> <li><strong>自定义模块：用户创建的每个.js 文件</strong></li> <li>**第三方模块：由第三方开发出来的模块，并非官方提供，**也不是用户创建的自定义模块，使用前需要下载</li></ul> <h3 id="_2-2-加载模块"><a href="#_2-2-加载模块" class="header-anchor">#</a> 2.2 加载模块</h3> <ul><li><strong>使用 require()方法，可以加载需要的内置模块，用户自定义模块，第三方模块</strong></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 加载fs模块</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>

<span class="token comment">//加载用户自定义模块</span>

<span class="token keyword">const</span> zdy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./zdy.js'</span><span class="token punctuation">)</span>

<span class="token comment">// 加载第三方模块</span>

<span class="token keyword">const</span> moment <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'moment'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h4 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h4> <ul><li>zdy.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'自定义模块被加载'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>test.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> zdy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./02.zdy.js'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>zdy<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>运行 test.js 效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/38dc6b97c4a0422e80266d1315cc4a72.png#pic_center" alt="在这里插入图片描述"></p> <h4 id="注意点"><a href="#注意点" class="header-anchor">#</a> 注意点</h4> <ul><li><p><strong>使用 require（）方法加载其他模块时，会执行被加载模块中的代码</strong></p></li> <li><p>使用 require（）<strong>方法加载自定义模块时，可以省略.js 后缀名</strong></p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> zdy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./02.zdy'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>zdy<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_2-3-模块作用域"><a href="#_2-3-模块作用域" class="header-anchor">#</a> 2.3 模块作用域</h3> <ul><li>和函数作用域类似，在<strong>自定义模块中定义的变量、方法，只能在当前模块内被访问</strong></li> <li>图解</li></ul> <p><img src="https://img-blog.csdnimg.cn/c80bce8cde254f209079ce0cc5ebde50.png#pic_center" alt="在这里插入图片描述"></p> <ul><li><p>好处</p> <ul><li>防止了全局变量污染的问题</li></ul></li></ul> <p><img src="https://img-blog.csdnimg.cn/47cd440b19664dbbbaecef16db15ff3a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <h4 id="示例-2"><a href="#示例-2" class="header-anchor">#</a> 示例</h4> <ul><li>zdy.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'自定义模块被加载'</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> ename <span class="token operator">=</span> <span class="token string">'张三'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>test.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> zdy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./02.zdy.js'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>zdy<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/e5807105304b4990ac795b04a6da6357.png#pic_center" alt="在这里插入图片描述"></p> <h3 id="_2-4-向外共享模块作用域中的成员"><a href="#_2-4-向外共享模块作用域中的成员" class="header-anchor">#</a> 2.4 向外共享模块作用域中的成员</h3> <h4 id="_2-4-1-module-对象"><a href="#_2-4-1-module-对象" class="header-anchor">#</a> 2.4.1 module 对象</h4> <ul><li><strong>每个.js 自定义模块中都有一个 module 对象，里面存储了和当前模块有关的信息</strong></li></ul> <h5 id="示例-3"><a href="#示例-3" class="header-anchor">#</a> <strong>示例</strong></h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>module<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/e0de2adc67b04c50a96f2e324595522c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <h4 id="_2-4-2-module-exports-对象"><a href="#_2-4-2-module-exports-对象" class="header-anchor">#</a> 2.4.2 module.exports 对象</h4> <ul><li>在自定义模块中，<strong>可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用</strong></li> <li><strong>使用 require()方法导入自定义模块时，得到的就是 module.exports 所指向的对象</strong></li></ul> <h5 id="示例-4"><a href="#示例-4" class="header-anchor">#</a> 示例</h5> <ul><li>自定义模块.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 在module.exports对象上挂载 username属性</span>

module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>username <span class="token operator">=</span> <span class="token string">'zs'</span>

<span class="token comment">// 在module.exports对象上挂载sayHello()方法</span>

module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">sayHello</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello!'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token number">20</span>
module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>age <span class="token operator">=</span> age
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ul><li>测试.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> zdy <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./06.自定义模块'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>zdy<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/77d7850ed4c648cc9abac769463c5aa8.png#pic_center" alt="在这里插入图片描述"></p> <h4 id="_2-4-3-共享成员时的注意点"><a href="#_2-4-3-共享成员时的注意点" class="header-anchor">#</a> 2.4.3 共享成员时的注意点</h4> <ul><li>使用 require()方法导入模块时，<strong>导入的结果，永远以 module.exports 指向的对象为准</strong></li></ul> <h5 id="示例-5"><a href="#示例-5" class="header-anchor">#</a> 示例</h5> <ul><li>自定义模块 2</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 要共享的成员永远以module.exports指向的对象为准</span>

module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>username <span class="token operator">=</span> <span class="token string">'zd'</span>

module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">sayHello</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 指向另一个对象</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">ename</span><span class="token operator">:</span> <span class="token string">'k'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">eage</span><span class="token operator">:</span> <span class="token string">'18'</span><span class="token punctuation">,</span>
  <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hi'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><ul><li>测试</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> zdy2 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./08.自定义模块2'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>zdy2<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/c64454a6221345aba66464dc535da884.png#pic_center" alt="在这里插入图片描述"></p> <h4 id="_2-4-4-exports-对象"><a href="#_2-4-4-exports-对象" class="header-anchor">#</a> 2.4.4 exports 对象</h4> <ul><li><p><strong>exports 对象和 module.exports 指向同一个对象，最终共享的结果，==以 module.exports 指向的对象为准==</strong></p></li> <li><p>示例</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>exports<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>module<span class="token punctuation">.</span>exports<span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>exports <span class="token operator">===</span> module<span class="token punctuation">.</span>exports<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/1b52f47208534e11b5b09a7d90abac35.png#pic_center" alt="在这里插入图片描述"></p> <h5 id="示例-6"><a href="#示例-6" class="header-anchor">#</a> 示例</h5> <ul><li>自定义模块 3</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token string">'19'</span>
exports<span class="token punctuation">.</span>username <span class="token operator">=</span> <span class="token string">'zs'</span>
exports<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token string">'18'</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">sayHello</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li>测试</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> zdy3 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./11.自定义模块3'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>zdy3<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/586a833fe3a64cbbb1cd029cfdb94153.png#pic_center" alt="在这里插入图片描述"></p> <h4 id="_2-4-5-exports-和-module-exports-的使用误区"><a href="#_2-4-5-exports-和-module-exports-的使用误区" class="header-anchor">#</a> 2.4.5 exports 和 module.exports 的使用误区</h4> <ul><li><strong>得到的永远是 module.exports 指向的对象</strong></li> <li><strong>为了防止混乱，不要同时使用 exports 和 module.exports</strong></li></ul> <p><img src="https://img-blog.csdnimg.cn/ceccef753e224096a2150a155cab85f0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <p><img src="https://img-blog.csdnimg.cn/f50a190b9e654e619d5b87f6a4b78ad3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <p><img src="https://img-blog.csdnimg.cn/c384d1e36cfc4d78882c4d1db9632dee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <p><img src="https://img-blog.csdnimg.cn/27135a65c3364d77aa5bbea6535986c9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <h4 id="_2-4-6-node-js-中的模块化规范"><a href="#_2-4-6-node-js-中的模块化规范" class="header-anchor">#</a> 2.4.6 Node.js 中的模块化规范</h4> <ul><li>遵循 CommonJs 模块化规范</li> <li>CommonJs 规定
<ul><li><strong>每个模块内部，module 变量代表当前模块</strong></li> <li><strong>module 变量是一个对象，他的 exports 属性(即 module.exports)是对外的接口</strong></li> <li><strong>加载某个模块，其实就是加载该模块的 module.exports 属性,require()方法用于加载模块</strong></li></ul></li></ul> <h2 id="_3-npm-和包"><a href="#_3-npm-和包" class="header-anchor">#</a> 3.npm 和包</h2> <h3 id="_3-1-包"><a href="#_3-1-包" class="header-anchor">#</a> 3.1 包</h3> <ul><li><strong>==Node.js 中的第三方模块叫做包==</strong></li> <li>包由第三方个人或团队开发出来的</li> <li>Node.js 的包免费开源</li></ul> <h3 id="_3-2-包的作用"><a href="#_3-2-包的作用" class="header-anchor">#</a> 3.2 包的作用</h3> <ul><li>Node.js 的内置模块仅仅提供了一些底层的 API，包是基于内置模块封装出来的，提高了开发效率</li> <li>包与内置模块的关系，类似与 jQuery 和浏览器内置 API 之间的关系</li></ul> <h3 id="_3-3-包的下载"><a href="#_3-3-包的下载" class="header-anchor">#</a> 3.3 包的下载</h3> <ul><li><p>搜索包的网址：&lt;<a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm (npmjs.com)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&gt;</p></li> <li><p>下载包的网址：&lt;<a href="https://registry.npmjs.org/" target="_blank" rel="noopener noreferrer">https://registry.npmjs.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&gt;</p></li></ul> <h3 id="_3-4-moment-包的使用"><a href="#_3-4-moment-包的使用" class="header-anchor">#</a> 3.4 moment 包的使用</h3> <ul><li>普通方法格式化日期</li> <li>自定义日期格式化模块</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">dateFormat</span><span class="token punctuation">(</span><span class="token parameter">dt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> y <span class="token operator">=</span> dt<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> m <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token keyword">var</span> h <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token keyword">var</span> mm <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>dt<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>y<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>d<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>h<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>mm<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>s<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token comment">// 补零函数</span>

<span class="token keyword">function</span> <span class="token function">padZero</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> n <span class="token operator">&lt;</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> n <span class="token operator">:</span> n
<span class="token punctuation">}</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  dateFormat<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><ul><li>测试日期格式化模块</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> format <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./14.自定义日期格式化'</span><span class="token punctuation">)</span>

<span class="token keyword">var</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">var</span> str <span class="token operator">=</span> format<span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/e84895333cd245e19c13cca198dff04a.png#pic_center" alt="在这里插入图片描述"></p> <h4 id="直接使用-moment-包来格式化日期"><a href="#直接使用-moment-包来格式化日期" class="header-anchor">#</a> 直接使用 moment 包来格式化日期</h4> <ul><li>下载包(管理员身份运行，先进入项目所在目录，再下载)</li></ul> <div class="language-txt line-numbers-mode"><pre class="language-txt"><code>npm install moment
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>使用文档</li></ul> <p>&lt;<a href="https://momentjs.com/docs/#/use-it/" target="_blank" rel="noopener noreferrer">Moment.js | Docs (momentjs.com)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&gt;</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 导入moment包</span>
<span class="token keyword">const</span> mt <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'moment'</span><span class="token punctuation">)</span>
<span class="token comment">// mt()获取当前时间，format日期格式化</span>
<span class="token keyword">var</span> dt <span class="token operator">=</span> <span class="token function">mt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD HH:mm:ss'</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dt<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/633ef8e57c3b4d0295f84583fd226eb9.png#pic_center" alt="在这里插入图片描述"></p> <h3 id="_3-4-装包后多的文件"><a href="#_3-4-装包后多的文件" class="header-anchor">#</a> 3.4 装包后多的文件</h3> <ul><li>node_modules 文件夹和 package-lock.json 的配置文件</li> <li><strong>node_modules 用来存放已安装到项目中的包</strong>，require（）导入第三方包时，从这个目录查找并加载包</li> <li><strong>package-lock.json:记录每一个包下的下载信息</strong>，例如包名，版本号等</li></ul> <h3 id="_3-5-包的版本号"><a href="#_3-5-包的版本号" class="header-anchor">#</a> 3.5 包的版本号</h3> <ul><li><p>格式：点分十进制，三位数字，如 2.24.0</p> <ul><li>第一位数字：大版本：底层重新设计</li> <li>第二位数字：功能版本：功能增添</li> <li>第三位数字：bug 修复版本：修复 bug</li></ul></li> <li><p>版本提升规则：只要前面的版本号增长了，后面的版本号归零</p></li></ul> <h3 id="_3-6-包管理配置文件"><a href="#_3-6-包管理配置文件" class="header-anchor">#</a> 3.6 包管理配置文件</h3> <ul><li>npm 规定：在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件，记录相关信息
<ul><li>项目的名称，版本号，描述</li> <li>项目中都用到了哪些包</li> <li>哪些包只在开发期间会用到</li> <li>哪些包在开发和部署阶段都需要用到</li></ul></li></ul> <p><img src="https://img-blog.csdnimg.cn/a1ff78fa1ca24a71b0a540d23601b013.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <p><img src="https://img-blog.csdnimg.cn/8e7473e234e3472681ff7931be14db8d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <ul><li><p>package.json 配置文件</p> <ul><li>创建方法</li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> init <span class="token parameter variable">-y</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>注意点
<ul><li>只能在英文的目录下成功运行，不能使用中午，不能使用空格</li> <li>创建成功后，提高 npm install 命令安装包时，npm 包管理工具会自动的把包的名称和版本号，记录到 package.json 中</li></ul></li></ul></li> <li><p>dependencies 节点</p> <ul><li>package.json 配置文件中的节点</li> <li>专门记录安装了哪些包</li></ul></li></ul> <p><img src="https://img-blog.csdnimg.cn/f76cb8dbb56645bdac0650996720b19b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <ul><li>同时安装多个包，包名之间用空格隔开</li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> i jquery art-template
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>一次性安装所有的依赖包（存在 package.json 配置文件）</li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code>// 执行npm <span class="token function">install</span> 或 <span class="token function">npm</span> i 命令时，npm包管理工具会读取package.json 中的dependencies 节点
// 读取节点中的包名称和版本号后，就会把这些包一次性全部下载

<span class="token function">npm</span> <span class="token function">install</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>卸载包
<ul><li>卸载包之后，package.json 的 dependencies 节点的相关记录也会删除</li></ul></li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> uninstall 包的名称
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li><p>devDependencies 节点</p> <ul><li>节点中的包在项目开发阶段会用到，项目上线后不会用到</li></ul></li> <li><p>Dependencies 节点</p> <ul><li>节点中的包在开发和上线后都需要用到</li></ul></li> <li><p>将包记录到 devDependencies 节点中</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> i 包名 <span class="token parameter variable">-D</span>
// 或者
<span class="token function">npm</span> <span class="token function">install</span> 包名 --save-dev
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul> <h3 id="_3-7-解决下包慢的问题"><a href="#_3-7-解决下包慢的问题" class="header-anchor">#</a> 3.7 解决下包慢的问题</h3> <p><img src="https://img-blog.csdnimg.cn/f7554b3c02dc4778bd9a42f20eb5855a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <ul><li>切换 npm 的下包镜像源</li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment"># 查看当前的下包镜像源</span>
<span class="token function">npm</span> config get registry
<span class="token comment"># 将下包镜像源切换为淘宝镜像源</span>
<span class="token function">npm</span> config <span class="token builtin class-name">set</span> <span class="token assign-left variable">registry</span><span class="token operator">=</span>https://registry.npmmirror.com/
<span class="token comment"># 检查镜像源是否切换成功</span>
<span class="token function">npm</span> config get registry
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_3-8-nrm"><a href="#_3-8-nrm" class="header-anchor">#</a> 3.8 nrm</h3> <ul><li>一个工具，方便切换下包的镜像源，快速查看和切换下包的镜像源</li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment"># 提高 npm包管理器，安装nrm为全局可用的工具</span>
<span class="token function">npm</span> i nrm <span class="token parameter variable">-g</span>
<span class="token comment"># 查看可用的镜像源</span>
nrm <span class="token function">ls</span>
<span class="token comment"># 将下包的镜像源切换为淘宝</span>
nrm use taobao
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_3-9-包的分类"><a href="#_3-9-包的分类" class="header-anchor">#</a> 3.9 包的分类</h3> <ul><li><p>全局包</p> <ul><li>在执行 npm install 命令时，如果提供了-g 参数，则会把包安装为全局包</li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> i 包名 <span class="token parameter variable">-g</span> <span class="token comment">#全局安装指定的包</span>
<span class="token function">npm</span> uninstall 包名 <span class="token parameter variable">-g</span> <span class="token comment">#x</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>注意点
<ul><li>只有工具性质的包，才有全局安装的必要性，因为他们提供了好用的终端命令</li> <li>判读某个包是否需要全局安装才能使用，可以参考官方文档</li></ul></li></ul></li> <li><p>项目包</p> <ul><li><p>安装到项目的 node_modules 目录中的包，都是项目包</p></li> <li><p>开发依赖包：（被记录到 devDependencies 节点中的包，只会在开发期间用到）</p></li> <li><p>核心依赖包：（被记录到 Dependencies 节点中的包，在开发期间和项目上线之后都会用到）</p></li> <li><p>安装方法</p></li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> i 包名 <span class="token parameter variable">-D</span> <span class="token comment">#开发依赖包（记录到devDepdentencies节点下）</span>
<span class="token function">npm</span> i 包名 <span class="token comment"># 核心依赖包（记录到Dependencies节点下）</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li></ul> <h3 id="_3-10-i5ting-toc"><a href="#_3-10-i5ting-toc" class="header-anchor">#</a> 3.10 i5ting_toc</h3> <ul><li>一个把 md 文档转为 html 页面的小工具</li></ul> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment"># 将i5ting_toc 安装为全局包</span>
<span class="token function">npm</span> <span class="token function">install</span> i5ting_toc <span class="token parameter variable">-g</span>

<span class="token comment">#调用i5ting_toc 实现md转html的功能</span>

i5ting_toc <span class="token parameter variable">-f</span> 要转换的md文件路径 <span class="token parameter variable">-o</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_3-11-规范的包结构"><a href="#_3-11-规范的包结构" class="header-anchor">#</a> 3.11 规范的包结构</h3> <ul><li>包必须以单独的目录存在</li> <li>包的顶级目录下包含 package.json 这个包管理配置文件</li> <li>package.json 包含 name,version,main 三个属性，代表包名，包版本，包的入口（js 文件所在）</li></ul> <h2 id="_4-开发自己的包"><a href="#_4-开发自己的包" class="header-anchor">#</a> 4.开发自己的包</h2> <ul><li>包实现的功能
<ul><li>格式化日期</li> <li>转义 html 特殊字符</li> <li>html 字符还原</li></ul></li> <li>初始化包的基本结构
<ul><li>新建 day03-utils 文件夹，作为包的根目录</li> <li>在 day03-utils 文件夹中新建三个文件
<ul><li>index.js</li> <li>package.json(可使用 npm init -y) 来自动创建，再修改一下</li> <li>README.md 说明文档</li></ul></li></ul></li> <li>包的功能的模块化
<ul><li>根目录下创建 src 文件夹</li> <li>将格式化日期的功能拆分到 src---&gt;dateDateFormat.js 中</li> <li>处理 html 的字符串拆分到 src-&gt;htmlTo</li> <li>index.js 导入上述两个功能，在把功能暴露出去</li></ul></li> <li>package.json</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
    <span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;day03-utils&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1.0.0&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;用于html的转换，时间日期格式化&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index.js&quot;</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">&quot;test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;keywords&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;lingxin&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;html&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Formdate&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">&quot;author&quot;</span><span class="token operator">:</span> <span class="token string">&quot;lingxin&quot;</span><span class="token punctuation">,</span>

    <span class="token string-property property">&quot;license&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ISC&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ul><li>index.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 这是day03-utils包的入口</span>

<span class="token comment">// 导入dateFormat和htmlTo包</span>

<span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./src/dateFormat'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> htmlTo <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./src/htmlTo'</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 使用展开运算符，将对象成员展开</span>
  <span class="token operator">...</span>date<span class="token punctuation">,</span>
  <span class="token operator">...</span>htmlTo<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ul><li>dateFormat.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 定义一个格式化日期的函数</span>
<span class="token keyword">function</span> <span class="token function">dateFormat</span><span class="token punctuation">(</span><span class="token parameter">dateStr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>dateStr<span class="token punctuation">)</span>
  <span class="token keyword">var</span> y <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> m <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> h <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> mm <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token keyword">var</span> ss <span class="token operator">=</span> <span class="token function">padZero</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>y<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>d<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>h<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>mm<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>ss<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token comment">// 补零函数</span>

<span class="token keyword">function</span> <span class="token function">padZero</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> n <span class="token operator">&lt;</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> n <span class="token operator">:</span> n
<span class="token punctuation">}</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  dateFormat<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><ul><li>htmlTo.js</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 将html标签中的&lt;&gt; &amp; 和 &quot; 转换为相应的实体字符</span>

<span class="token keyword">function</span> <span class="token function">htmlToEntity</span><span class="token punctuation">(</span><span class="token parameter">htmlStr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> htmlStr<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">&lt;|&gt;|&quot;|&amp;</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">match</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>match<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> <span class="token string">'&lt;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&amp;lt;'</span>
      <span class="token keyword">case</span> <span class="token string">'&gt;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&amp;gt;'</span>
      <span class="token keyword">case</span> <span class="token string">'&quot;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&amp;quot;'</span>
      <span class="token keyword">case</span> <span class="token string">'&amp;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&amp;amp;'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 将实体字符还原回来</span>
<span class="token keyword">function</span> <span class="token function">htmlTochar</span><span class="token punctuation">(</span><span class="token parameter">htmlStr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> htmlStr<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">&amp;lt;|&amp;gt;|&amp;amp;|&amp;quot;</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">match</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>match<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">case</span> <span class="token string">'&amp;lt;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&lt;'</span>
      <span class="token keyword">case</span> <span class="token string">'&amp;gt;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&gt;'</span>
      <span class="token keyword">case</span> <span class="token string">'&amp;amp;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&amp;'</span>
      <span class="token keyword">case</span> <span class="token string">'&amp;quot;'</span><span class="token operator">:</span>
        <span class="token keyword">return</span> <span class="token string">'&quot;'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  htmlToEntity<span class="token punctuation">,</span>
  htmlTochar<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><ul><li>README.md</li></ul> <div class="language-markdown line-numbers-mode"><pre class="language-markdown"><code><span class="token title important"><span class="token punctuation">##</span> 安装</span>

<span class="token code"><span class="token punctuation">```</span><span class="token code-language">shell</span>
<span class="token code-block language-shell"><span class="token function">npm</span> <span class="token function">install</span> day03-utils</span>
<span class="token punctuation">```</span></span>

<span class="token title important"><span class="token punctuation">##</span> 导入</span>

<span class="token code"><span class="token punctuation">```</span><span class="token code-language">js</span>
<span class="token code-block language-js"><span class="token keyword">const</span> d3 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'day03-utils'</span><span class="token punctuation">)</span></span>
<span class="token punctuation">```</span></span>

<span class="token title important"><span class="token punctuation">##</span> 格式化日期函数的使用</span>

<span class="token code"><span class="token punctuation">```</span><span class="token code-language">js</span>
<span class="token code-block language-js"><span class="token keyword">var</span> time <span class="token operator">=</span> d3<span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span>
<span class="token comment">// 输出结果 2022-03-14-18-53-18</span></span>
<span class="token punctuation">```</span></span>

<span class="token title important"><span class="token punctuation">##</span> 转义特殊字符的使用</span>

<span class="token code"><span class="token punctuation">```</span><span class="token code-language">js</span>
<span class="token code-block language-js"><span class="token comment">// 测试字符转义</span>
<span class="token keyword">var</span> str2 <span class="token operator">=</span> d3<span class="token punctuation">.</span><span class="token function">htmlToEntity</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span>
<span class="token comment">// 输出结果：&amp;lt;h1 title=&amp;quot;666&amp;quot;&amp;gt;123&amp;amp;nbsp;&amp;lt;h1/&amp;gt;</span></span>
<span class="token punctuation">```</span></span>

<span class="token title important"><span class="token punctuation">##</span> 还原特殊字符的使用</span>

<span class="token code"><span class="token punctuation">```</span><span class="token code-language">js</span>
<span class="token code-block language-js"><span class="token keyword">var</span> str2 <span class="token operator">=</span> d3<span class="token punctuation">.</span><span class="token function">htmlToEntity</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token comment">// 测试字符还原</span>
<span class="token keyword">var</span> str3 <span class="token operator">=</span> d3<span class="token punctuation">.</span><span class="token function">htmlTochar</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str3<span class="token punctuation">)</span>
<span class="token comment">// 输出结果：&lt;h1 title=&quot;666&quot;&gt;123&amp;nbsp;&lt;h1/&gt;</span></span>
<span class="token punctuation">```</span></span>

<span class="token title important"><span class="token punctuation">##</span> 开源协议</span>

ISC
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><h2 id="_5-发布包到-npm-上"><a href="#_5-发布包到-npm-上" class="header-anchor">#</a> 5.发布包到 npm 上</h2> <ol><li><p>注册 npm 的账号</p></li> <li><p>在终端上登录 npm 账户</p> <ol><li>首先将下包的服务器切换成 npm 的官方服务器</li> <li>使用 nrm 工具换源</li> <li>终端登录</li></ol> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> login
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ol> <p><img src="https://img-blog.csdnimg.cn/b2584b00c41e40df99d3a5ccc727537d.png#pic_center" alt="在这里插入图片描述"></p> <ol start="3"><li><p>发布包到 npm</p> <ol><li>将终端切换到根目录下</li> <li>在 npm 官网中查看包名是否雷同（雷同不能发布）</li> <li>输入发包命令</li></ol> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> publish
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>删除已发布的包</p></li></ol> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> unpublish 包名 <span class="token parameter variable">--force</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>注意点</li></ul> <p><img src="https://img-blog.csdnimg.cn/689a21078b9545d38bceb422afbae890.png#pic_center" alt="在这里插入图片描述"></p> <h2 id="_6-模块加载机制"><a href="#_6-模块加载机制" class="header-anchor">#</a> 6. 模块加载机制</h2> <h3 id="_6-1-模块优先从缓存中加载"><a href="#_6-1-模块优先从缓存中加载" class="header-anchor">#</a> 6.1 模块优先从缓存中加载</h3> <ul><li>模块在第一次被加载时里面的代码会被执行，加载后模块被缓存，多次调用 require（）方法不会导致模块的代表被多次执行</li></ul> <h4 id="示例-7"><a href="#示例-7" class="header-anchor">#</a> 示例</h4> <ul><li>自定义模块 4</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>测试自定义模块 4</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./17.自定义模块4'</span><span class="token punctuation">)</span>

<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./17.自定义模块4'</span><span class="token punctuation">)</span>

<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./17.自定义模块4'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>效果图</li></ul> <p><img src="https://img-blog.csdnimg.cn/42546f4c07ce4f5eb546fec77e220be5.png#pic_center" alt="在这里插入图片描述"></p> <h3 id="_6-2-内置模块的加载机制"><a href="#_6-2-内置模块的加载机制" class="header-anchor">#</a> 6.2 内置模块的加载机制</h3> <ul><li>内置模块是由 Node.js 官方提供的，内置模块的加载优先级最高</li> <li>例如，require（'fs'）始终返回内置的 fs 模块，即使在 node_modules 目录下有名字相同的包也叫做 fs</li></ul> <h3 id="_6-3-自定义模块的加载机制"><a href="#_6-3-自定义模块的加载机制" class="header-anchor">#</a> 6.3 自定义模块的加载机制</h3> <ul><li>使用 require()加载自定义模块时，必须指定以./或../开头的路径标识符，在加载自定义模块时，如果没有指定./或../这样的路径标识符，则 node 会把他当作内置模块或第三方模块进行加载</li></ul> <p><img src="https://img-blog.csdnimg.cn/3a0385decac04ddabb43b5f71e6b4dab.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <h3 id="_6-4-第三方模块的加载机制"><a href="#_6-4-第三方模块的加载机制" class="header-anchor">#</a> 6.4 第三方模块的加载机制</h3> <p><img src="https://img-blog.csdnimg.cn/320e60db948c430d9a182929aaf261c1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p> <h3 id="_6-5-目录作为模块"><a href="#_6-5-目录作为模块" class="header-anchor">#</a> 6.5 目录作为模块</h3> <p><img src="https://img-blog.csdnimg.cn/f5b3e74e907a490d8d7094c82f8b036b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YeM5q2G,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="在这里插入图片描述"></p></div></div>  <div class="page-edit"><div class="edit-link"><a href="https://github.com/linxin1123/vuepress-blog/edit/master/docs/01.前端/47.NodeJs笔记/03.Node.js学习day03.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/02/17, 11:29:32</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/9359f8/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">js学习第二天</div></a> <a href="/pages/268832/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">正则表达式笔记</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/9359f8/" class="prev">js学习第二天</a></span> <span class="next"><a href="/pages/268832/">正则表达式笔记</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/0b785d/"><div>
            Vuex
            <!----></div></a> <span class="date">03-14</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/c59cc0/"><div>
            Vue响应式原理
            <!----></div></a> <span class="date">03-14</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/83cc7a/"><div>
            Vue虚拟DOM-cnblog
            <!----></div></a> <span class="date">03-14</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="3010733382@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/linxin1123" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2022-2023
    <span>lingxin | <a href="https://github.com/linxin1123/vuepress-blog/blob/master/LICENSE" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.57550e13.js" defer></script><script src="/assets/js/2.f014c35f.js" defer></script><script src="/assets/js/65.bc099429.js" defer></script>
  </body>
</html>
